<script setup lang="ts">
import { useFormItem } from 'element-plus'

defineOptions({ name: 'FInput' })
const emit = defineEmits(['getData'])
// 获取v-model绑定值
const modelValue = defineModel<string|null>({ local: true })

// 获取传递给自定义组件中的属性值
const attrs = useAttrs()
const getDate = () => {
    emit('getData')
}
// 判断是否类型是文本框类型
const isTextarea = computed(() => attrs.type === 'textarea')

// 如果是文本框类型就赋予文本框的默认属性
const textareaProps = computed(() => {
    const showWordLimit = !!attrs.maxlength
    if (isTextarea.value) {
        return {
            autosize: { minRows: 3 },
            showWordLimit: true,
            maxlength: '256',
        }
    }
    return {
        showWordLimit,
    }
})

// 获取组件el-form-item的的label名称，添加在placeholder中
const { form, formItem } = useFormItem()
const placeholder = computed(() => {
    // 查询表单
    if (!form?.model && form?.inline) return '请输入搜索关键词'

    // 文本域
    if (isTextarea.value) return '非必填'

    // 新增or编辑表单
    if (formItem?.label) return `请输入${formItem.label}`

    return '请输入'
})


</script>

<template>
    <el-input v-bind="{ ...textareaProps, ...$attrs }" v-model.trim="modelValue" :placeholder="placeholder" clearable
        :formatter="(value: any) => value" @keyup.enter.native="getDate" @clear="getDate" />
</template>

<style lang="scss" scoped></style>